<template>
    <div class="loop-box">
        <el-carousel class="car-box" height="500px">
            <el-carousel-item class="loop-item" v-for="item in picList" :key="item.id">
                <img :src="item.url" alt="loop" class="loop-pic">
            </el-carousel-item>
        </el-carousel>

        <div class="ope-box">
            <el-button type="primary">其他操作</el-button>

            <el-upload class="upload-demo" :before-upload="beforeAvatarUpload" action="">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>

            <el-button type="primary" @click="upload">上传</el-button>
            <el-button type="primary" @click="download">下载</el-button>
        </div>
    </div>
</template>

<script setup>
import { gatewayPrefix, userMiddleContextPath, avatarUrlPrefix} from '@/utils/commConstance'
import { $http } from "@/utils/axios";
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";

let picList = ref([
    {id:1 ,url: avatarUrlPrefix + 'loop1.webp'},
    {id:2 ,url: avatarUrlPrefix + 'loop2.webp'},
    {id:3 ,url: avatarUrlPrefix + 'loop3.webp'}
])

const bfile = ref('')
const b = reactive({})
const beforeAvatarUpload = (f)=>{
    console.log("文件对象==>", f);
    bfile.value = f
}
const upload = ()=>{
    ElMessage.success("上传")
    let formData = new FormData(); //获取表单数据
    let re = b;
    Object.keys(re).forEach((key) => {
        formData.append(key, re[key]);
    });
    formData.append("file",bfile.value);
    $http.post(`${gatewayPrefix}/${userMiddleContextPath}/userTest/testlFileUpload`, formData, {
        headers: {
            'content-type': 'multipart/form-data'
        }
    }).then(function(r) {
        console.log("上传返回：",r);
    });
    
}

const url = ref('D:\\Projects\\proImg\\planetImg\\planet1688997260590.jpg')
const download=()=>{
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/userTest/testFileDown1?name=${url.value}` ).then(function(r) {
        console.log("下载返回：",r);
    });
}

</script>

<style scoped>
.loop-box{
    width: 100%;
}
.car-box{
    width: 100%;
    margin-top: 5%;
}
.loop-item{
    width: 100%;
    border-radius: 5px;
}
.ope-box{
    margin-top: 10px;
}
.loop-pic{
    width: 100%;
    height: 100%;
}
</style>